<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>第十章:DOM进阶</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
    <script src="js/main.js"></script>
</head>

<body>
    <h3 align="center">第十章：表单操作大全</h3>
    <div id="div1" class="divbox1" class="divClassName1" class="divClassNameName2">
        <h3>点击》获取静态HTML中属性值</h3>
        语法:obj.attr;
        <div class="divShow">

        </div>
    </div>

    <div id="div2" class="divbox2" class="divClassName1" class="divClassNameName2">
        <h3>点击》动态创建DOM元素,并获DOM元素的属性</h3>
        <div id="inputPosition"></div>
        <div id="inputAtrr">
            表单独属性:
        </div>
    </div>
    <!-- 获取单行文本的值  -->
    <div id="div3">
        <h3 id="txt001">获取单行文本的值</h3>
        <div id="input002">
            <input type="text" name="userName" id="userName" />
            <input type="button" id="buttonGetValue" value="获取">
            <input type="button" id="h3Text" value="获取本色块H3内容">
        </div>
        <div id="inputValue">
            表单独属性:
        </div>
    </div>


    <div id="divRadio" class="divbox1">
        <h3>获取单选框的值</h3>
        最爱好的水果:
        <div id="aiHao">
            苹果<input type="radio" name="fruit" value="苹果" />
            葡萄<input type="radio" name="fruit" value="葡萄" />
            黄梨<input type="radio" name="fruit" value="黄梨" />

            <input type="button" id="aiHaoBtn" value="获取最爱">

        </div>
        <div id="aiHaoList">
            你的最爱:
        </div>
    </div>

    <div id="divCheckBox" class="divbox1">
        <h3>获取单选框的值</h3>
        最爱好的水果:
        <div id="yuDong">
            苹果<input type="checkbox" name="sports" value="苹果" />
            葡萄<input type="checkbox" name="sports" value="葡萄" />
            黄梨<input type="checkbox" name="sports" value="黄梨" />

            <input type="button" id="checkboxBtn" value="获取最爱">
            <input type="button" id="checkboxSelectAll" value="全部选择">
            <input type="button" id="checkboxSelectNot" value="清空重选">
            <input type="button" id="checkboxInvertSelect" value="反向选择">

        </div>
        <div id="sportList">
            你的最爱:
        </div>
    </div>

    <div id="divSelect" class="divbox1">
        <h3>获取下拉菜单的值</h3>
        最爱好的运动:
        <div id="SelectShow">
            <select name="sports2" id="sportsID">
                <option value="">请选择</option>
                <option value="跑步">跑步</option>
                <option value="竞走">竞走</option>
                <option value="篮球">跑步</option>

            </select>
            <input type="button" id="selectBtn" value="获取最爱">


        </div>
        <div id="selectList">
            你的最爱:
        </div>
    </div>

    <div id="divSelect" class="divbox1">
        <h3>设置HTML属性的值:按钮的值</h3>
        <input type="button" value="修改(点击我改名" id="changeButton"/>
    </div>
    <div id="divSelect" class="divbox1">
        <h3>设置HTML属性的值:图片的值</h3>
        <img src="images/lightOpen.png" id="light" />
    </div>

    <div id="divAttr" class="divbox1" style="height:200px;">
        <h3 id="divShow001" class="title001">元素属性的:获取，创建，移除，判断是否包含某个属性</h3>
       <input id="divGetAtrri" value="获取元素属性" type="button"><br/>
       <input id="divAddAtrri" value="添加元素属性" type="button"><br/>
       <input id="divRemoveAtrri" value="删除元素属性" type="button"><br/>
       <input id="divHasAtrri" value="判断元素是否包含属性" type="button"><br/>

       <div id="returnList">
            返回的结果:
       </div>
    </div>
    <div id="divAttr2" class="divbox1" >
        <h3 id="divShow001" class="title001">CSS属性值的操作:获取CSS属性和设置CSS属性</h3>
        <div id="boxAttr2">
            内容
        </div>
       <input id="div2GetAtrri" value="获取背景属性的值" type="button"><br/>
       <input id="div2AddAtrri22" value="添加背景属性值红色" type="button"><br/>
       <input id="div2AddAtrri33" value="添加多个属性的值" type="button"><br/>
        

       <div id="divAttr2List">
            返回的结果:
       </div>
    </div>
    
</body>

</html>